<template>
  <div>
    <el-dialog append-to-body title="关联商品" class="noselect"
               width="60%"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
            <div style="margin-top:20px;font-size:20px">做法【微辣】可选择关联商品</div>
            <el-row >
                    <el-col :span="10">
                        <div style="background:blue;color:#fff;padding:5px 10px">
                            待选
                        </div>
                        <template>
                                <el-table
                                    ref="multipleTable"
                                    :data="tableData3"
                                    tooltip-effect="dark"
                                    style="width: 100%"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column
                                    type="selection"
                                    min-width="30">
                                    </el-table-column>
                                    <el-table-column
                                        label="商品"
                                        min-width="70">
                                            <template slot-scope="scope">
                                                {{ scope.row.date }}
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="价格"
                                        min-width="70">
                                            <template scope="scope">
                                                <span>{{scope.row.name}}</span>
                                            </template>
                                    </el-table-column>
                                </el-table>
                        </template>
                    </el-col>
                    <el-col :span="4">
                        <div class="text-center" style="font-size:18px">
                            加价
                        </div>
                        <div class="text-center" style="margin:10px 0">
                            <el-select v-model="value" placeholder="请选择" style="width:90%">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                            </el-select>
                        </div>
                        <div class="text-center" style="wdith:100%">
                            <el-button type="primary">添加</el-button>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div style="background:blue;color:#fff;padding:5px 10px">已选</div>
                        <!-- <template>
                            <el-table
                                ref="multipleTable"
                                :data="tableData3"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                                    <el-table-column
                                        label="菜品名称"
                                        min-width="70">
                                            <template scope="scope">
                                                <span>{{scope.row.name}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="加价方式"
                                        min-width="70">
                                            <template scope="scope">
                                                <span>{{scope.row.type}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="加价金额/比例"
                                        min-width="70">
                                            <template scope="scope">
                                                <span>{{scope.row.name}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="加价后价格/元"
                                        min-width="70">
                                            <template scope="scope">
                                                <span>{{scope.row.name}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="操作"
                                        min-width="30">
                                            <template scope="scope">
                                                <el-button @click="deleted(scope.row)" type="text">删除</el-button>
                                            </template>
                                    </el-table-column>
                                </el-table>
                        </template> -->
                    </el-col>
            </el-row>
      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default {
    props: ['isShow', 'id'],  //参数
    data() {
      return {
        modelForm: {
          attribute:'1'
        },
        tableData3:[],
        options:[{
          value:1,
          label:1
        }],
        value:'',
        showDialog: false,
        activityId: "",
        isSave: true,
        downCategeryId: [],
        isUpdate: false,
        treeData:[],
                data2: [{
          id: 1,
          label: '餐厅管理',
          children: [{
            id: 7,
            label: '菜单管理',
          },{
            id: 8,
            label: '原因备注',
          },
          {
            id: 9,
            label: '积分管理',
          }]
        }, {
          id: 2,
          label: '会员管理',
          children: [{
            id: 5,
            label: '积分兑换方案'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },

    watch: {
      isShow: function (newValue, oldValue) {
        this.showDialog = newValue;
        if (newValue) {
          if (this.id != '') {
            this.activityId = this.id;
            this.isSave = false;
            this.isUpdate = true;

            this.$axios.get("materials/materialCategorys/" + this.activityId + "/update").then(data => {
              this.modelForm = data.content.materialCategory;
              var dataValue = data.content;
              var tree = dataValue.treeData;
              this.newLabel(tree);
              this.treeData = tree;
              dataValue.materialCategory.parentId = dataValue.materialCategory.parentId + '';
              this.downCategeryId = [dataValue.materialCategory.parentId];
            });
          } else {
            this.isSave = true;
            this.isUpdate=false;
            this.$axios.get("materials/materialCategorys/create").then(data => {
              this.modelForm = data.content.materialCategory;
              var dataValue = data.content;
              var tree = dataValue.treeData;
              this.newLabel(tree);
              this.treeData = tree;
              console.log(this.treeData);
            });
          }
        }
      }
    },
    created() {
      window.this = this;
    },
    methods: {
      handleSelectionChange(){

      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            newList[i].value = newList[i].id + "";
            newList[i].children = null;
          }
        }
      },
      goBack() {
        this.router.go(-1);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.modelForm.parentId = this.downCategeryId[this.downCategeryId.length - 1];
            if (this.modelForm.parentId === 0) {
              this.modelForm.parentIds = "0/";
            } else {
              this.modelForm.parentIds = "0/" + this.modelForm.parentId + "/";
            }
            if (!this.modelForm.parentId) {
              this.modelForm.parentId = 0;
            }
            if (this.isSave) {
              this.$axios.post("materials/materialCategorys/create", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }

              })

            } else {
              this.modelForm._method = "PUT";
              this.$axios.put("materials/materialCategorys/" + this.activityId + "/update", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('close');
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit('close');
        done();
      },
      isNum(item, key) {
        var r = /^\+?[1-9][0-9]*$/;
        if (!r.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      },
      isDouble(item, key) {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      }
    }
  }
</script>
<style scoped>
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
</style>
